<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <ul>
    <!--  -->
    <li v-for="item in letters">{{item}}</li>
  </ul>

  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue(
    {
      el: '#app',
      data:
      {
        letters:
        [
          'A',
          'B',
          'C',
          'D',
          'E'
        ]
      },
      methods:
      {
        btnClick()
        {
          // 可响应式
          // 1. push方法
          // this.letters.push('AAA');
          // 一次添加多个
          // this.letters.push('AAA', 'BBB', 'CCC');

          // 2. pop() 删除数组中最后一个元素
          // this.letters.pop();
          
          // 3. shift() 删除shou中第一个元素
          // this.letters.shift();

          // 4. unshift() 给数组头添加一个或多个元素
          // this.letters.unshift('AAA')

          // 5. splice()
          //   1. start   从哪个位置(下标)开始 删除
          // a. 删除元素 
          //   2. number 删除几个
          // b, 插入元素
          //   2. num = 0 不进行删除
          //   3. element 添加元素例如 : this.letters.splice(1, 0, 'a', 'b')
          // c. 替换元素
          //   2. number  删除几个元素
          //   3. element 添加元素例如 : this.letters.splice(1, 2, 'a', 'b')
          // 三个参数
          // this.letters.splice(1, 0, 'x', 'y');

          // 6. reverse() 反转数组
          // this.letters.reverse();


          // 不可响应式
          // 1. 通过索引值修改数组中的元素 Vue不会自动去渲染界面
          // this.letters[0] = "VVV";

          // 方法一:可以使用 splice进行替换
          // this.letters.splice(0, 1, 'VVV');

          // 方法二：Vue.set()
          Vue.set(this.letters, 0, 'VVV');
        }
      }
    }
  )

  /*
  // 对两个数值的相加
  function sum(num1, num2)
  {
    return num1 + num2;
  }

  // 对多个数值进行相加
  function sum(...num)
  {
    console.log(num);
  }

  sum(1, 2, 33, 44, 33)
  */

</script>
  
</body>
</html>